<script setup lang='ts' name="org-role-checkbox">
import { ElCheckbox, ElCheckboxGroup, ElCollapse, ElCollapseItem } from 'element-plus'
import { toRefs } from 'vue'

const props = withDefaults(defineProps<{
    resultList?: any
}>(), {
    resultList: [],

})

const activeNames = ref<any>([0, 1, 2, 3])
const { resultList } = toRefs(props)
const getResultList = ref<any>([])
const getCheckedCities = ref<any>([])

function handleCheckAllChange(val: any, item: any) {
    itemIndeterminate(item)
    if (val) {
        item.children.forEach((items: any) => {
            getCheckedCities.value.push(items.code)
        })
        item.checkAll = true
    }
    else {
        item.checkAll = false
        item.children.forEach((items: any) => {
            getCheckedCities.value.forEach((itemss: any, index: any, arr: any) => {
                console.log(itemss)
                if (items.code === arr[index])
                    getCheckedCities.value.splice(index, 1)
            })
        })
    }
}

function handleCheckedCitiesChange(value: any, data: any) {
    getCheckedCities.value = value
    itemIndeterminate(data)
}

function init() {
    getResultList.value = resultList.value
    getResultList.value = getResultList.value.map(v => ({
        ...v,
        checkAll: false,
    }))
}

init()

const handleGroupName = computed(() => (data: any) => {
    const dataLeg = data.children.length
    let tempResultListOne: any = []
    tempResultListOne = Object.values(data.children.slice(0, Math.floor(dataLeg / 2)).reduce((acc: any, cur: any) => {
        const { group_name, ...rest } = cur
        if (acc[group_name])
            acc[group_name].children.push(rest)
        else
            acc[group_name] = { children: [rest], group_name }
        return acc
    }, {}))

    tempResultListOne.forEach((item: any) => {
        item.checkAll = false
    })
    return tempResultListOne
})

const handleGroupName2 = computed(() => (data: any) => {
    const dataLeg = data.children.length
    let tempResultListTwo: any = []

    tempResultListTwo = Object.values(data.children.slice(Math.floor(dataLeg / 2), dataLeg).reduce((acc: any, cur: any) => {
        const { group_name, ...rest } = cur
        if (acc[group_name])
            acc[group_name].children.push(rest)
        else
            acc[group_name] = { children: [rest], group_name }

        return acc
    }, {}))

    tempResultListTwo.forEach((item: any) => {
        item.checkAll = false
    })
    return tempResultListTwo
})

// 是否全选
function itemIndeterminate(item: any) {
    if (JSON.stringify(item) === '{}') {
        return false
    }
    else {
        return (
            item.children.every((v: any) => getCheckedCities.value.includes(v.code))
        )
    }
}

function itemIndeterminateRight(item: any) {
    if (JSON.stringify(item) === '{}') {
        return false
    }
    else {
        return (
            item.children.some((v: any) => getCheckedCities.value.includes(v.code))
            && !item.children.every((v: any) => getCheckedCities.value.includes(v.code))
        )
    }
}

function handleCheckAllChangeProOne(val: any, item: any) {
    itemIndeterminateRight(item)
    if (val) {
        item.checkAll = true
        item.children.forEach((items: any) => {
            getCheckedCities.value.push(items.code)
        })
    }
    else {
        item.checkAll = false

        item.children.forEach((items: any) => {
            getCheckedCities.value.forEach((itemss: any, index: any, arr: any) => {
                console.log(itemss)
                if (items.code === arr[index])
                    getCheckedCities.value.splice(index, 1)
            })
        })
    }
}

function handleCheckAll(data) {
    getCheckedCities.value = []
    if (data) {
        resultList.value.forEach((item) => {
            item.children.forEach((items) => {
                getCheckedCities.value.push(items.code)
            })
        })
    }
}

defineExpose({
    getCheckedCities,
    handleCheckAll,
})
</script>

<template>
    <div class="demo-collapse">
        <ElCollapse v-model="activeNames">
            <div v-for="(item, index) in getResultList"
                 :key="item.module_name"
            >
                <ElCollapseItem :title="item.module_name"
                                :name="index"
                >
                    <div flex
                         justify-between
                         style="align-items: center;"
                    >
                        <div>
                            <div v-for="items in handleGroupName(item)"
                                 :key="items.group_name"
                                 mb-10
                                 flex
                            >
                                <ElCheckbox :value="items.checkAll ? true : false"
                                            :indeterminate="itemIndeterminate(items)"
                                            @change="handleCheckAllChange($event, items)"
                                >
                                    <div style="background-color: #f7f8fa;padding: 10px;"
                                         w-130
                                    >
                                        {{ items.group_name }}
                                    </div>
                                </ElCheckbox>

                                <ElCheckboxGroup v-model="getCheckedCities"
                                                 ml-60
                                                 @change="handleCheckedCitiesChange($event, item)"
                                >
                                    <ElCheckbox v-for="city in items.children"
                                                :key="city.code"
                                                :label="city.display_name"
                                                :value="city.code"
                                    >
                                        {{ city.display_name }}
                                    </ElCheckbox>
                                </ElCheckboxGroup>
                            </div>

                            <div v-for="items in handleGroupName2(item)"
                                 :key="items.group_name"
                                 mb-10
                                 flex
                            >
                                <ElCheckbox v-model="items.checkAll"
                                            :indeterminate="itemIndeterminate(items)"
                                            @change="handleCheckAllChange($event, items)"
                                >
                                    <div style="background-color: #f7f8fa;padding: 10px;"
                                         w-130
                                    >
                                        {{ items.group_name }}
                                    </div>
                                </ElCheckbox>

                                <ElCheckboxGroup v-model="getCheckedCities"
                                                 ml-60
                                                 @change="handleCheckedCitiesChange($event, item)"
                                >
                                    <ElCheckbox v-for="city in items.children"
                                                :key="city.code"
                                                :label="city.display_name"
                                                :value="city.code"
                                    >
                                        {{ city.display_name }}
                                    </ElCheckbox>
                                </ElCheckboxGroup>
                            </div>
                        </div>

                        <div>
                            <ElCheckbox v-model="item.checkAll"
                                        label="全选"
                                        size="large"
                                        :indeterminate="itemIndeterminateRight(item)"
                                        @change="handleCheckAllChangeProOne($event, item)"
                            />
                        </div>
                    </div>
                </ElCollapseItem>
            </div>
        </elcollapse>
    </div>
</template>
